import locale from '../locale/locale'
import luckysheetsizeauto from './resize'
import Store from '../store'

function initialProtectionRIghtBar(file) {
  const _locale = locale()
  const local_dataConfiguration = _locale.dataConfiguration
  const locale_button = _locale.button

  const protectionModalHtml = `<div id="luckysheet-modal-dialog-slider-dataconfig" class="luckysheet-modal-dialog-slider luckysheet-modal-dialog-slider-pivot" style="display:none;">
        <div class="luckysheet-modal-dialog-slider-title"> 
          <span>${local_dataConfiguration.protectiontTitle}</span>
          <span id="luckysheet-modal-dialog-dataconfig-close" title="${locale_button.close}">
            <i class="lksticonfont luckysheet-iconfont-qingchu" style="user-select: none;"></i>
          </span>
        </div>
        <div id="dataconfigmouseFnc" class="luckysheet-modal-dialog-slider-content ztree" style="top: 44px;"></div>
        <div class="luckysheet-slider-protection-config" style="bottom:0px;border-top: 1px solid #cfcfcf;height:45px">
          <div class="luckysheet-slider-protection-column" style="left:0px;text-align: center;width: 100%;line-height: 45px;">
            ${local_dataConfiguration.titleTips}
          </div>
      </div>
    </div>`
  if (Store.useCase == 'page') {
    $('body')
      .first()
      .append(protectionModalHtml)
  } else {
    $('#sheetContiner')
      .first()
      .append(protectionModalHtml)
  }

  //cancel protection
  $('#luckysheet-modal-dialog-dataconfig-close').click(function() {
    closeProtectionModal()
  })

  const res = Store.treeList || []
  if (res.length) {
    var MoveTest = {
      errorMsg: '拖放位置异常，请重新拖放！',
      curTarget: null,
      curTmpTarget: null,
      noSel: function() {
        try {
          window.getSelection
            ? window.getSelection().removeAllRanges()
            : document.selection.empty()
        } catch (e) {}
      },
      dragTree2Dom: function(treeId, treeNodes) {
        if (!treeNodes[0].isParent) {
          const pNode = treeNodes[0].getParentNode()
          const OP = {
            acValue: pNode.code + '.' + treeNodes[0].code,
          }
          window.activeDBData = OP
          return true
        }
        return false
      },
      prevTree: function() {
        return false
      },
      nextTree: function() {
        return false
      },
      innerTree: function() {
        return false
      },
      dragMove: function(e, treeId, treeNodes) {
        var p = null,
          pId = 'dom_' + treeNodes[0].pId
        if (e.target.id == pId) {
          p = $(e.target)
        } else {
          p = $(e.target).parent('#' + pId)
          if (!p.get(0)) {
            p = null
          }
        }
        if (p) {
          p.addClass('active')
        }
      },
    }

    const setting = {
      edit: {
        enable: true,
        showRemoveBtn: false,
        showRenameBtn: false,
        drag: {
          prev: MoveTest.prevTree,
          next: MoveTest.nextTree,
          inner: MoveTest.innerTree,
        },
      },
      data: {
        keep: {
          parent: true,
          leaf: true,
        },
        simpleData: {
          enable: true,
          idKey: 'id',
          pIdKey: 'parentId',
        },
      },
      callback: {
        beforeDrag: MoveTest.dragTree2Dom,
        onDragMove: MoveTest.dragMove,
      },
      view: {
        selectedMulti: false,
      },
    }

    $.fn.zTree.init($('#dataconfigmouseFnc'), setting, res)
  } else {
    $('#dataconfigmouseFnc').empty()
  }
}

export function openDataConfigurationModal(file) {
  try {
    if (!document.getElementById('luckysheet-modal-dialog-slider-dataconfig')) {
      initialProtectionRIghtBar(file)
    }
  } catch {}
  $('#luckysheet-modal-dialog-slider-dataconfig').show()
  luckysheetsizeauto()
}

export function closeProtectionModal() {
  $('#luckysheet-modal-dialog-slider-dataconfig').hide()
  luckysheetsizeauto()
}
